 //1. 公用样式
require('../../assets/css/index.less');
require('../../assets/css/basic.less');
require('../../assets/fonts/iconfont.css');
//2. 当前页面样式
require('./infomodify.less');
require('../../lib/swiper/swiper-bundle.css');
require('../../lib/weui/weui.css')
let weui = require('../../lib/weui/weui.js')
console.log(weui);

//3. 公用js
let dom = require('../../utils/dom.js');
let https = require('../../utils/https.js');
let local = require('../../utils/local.js');
require('../../lib/swiper/swiper-bundle.js');


dom.ready(function () {
    // dom.getEle('#backBtn').addEventListener('click',function(){
    //     // console.log('333');
    //     window.history.go(-1);
    // })
    // 调用回退的封装函数
    dom.goback()


    // 上传头像
    let imgUrl;
    dom.getEle('#headFile').addEventListener('change', function () {
        // 1.获取当前上传图像的所有相关资源
        let f = this.files[0];    //索引为0的才是图片
        // console.log(this.files);

        // 2.组装表单传输格式---使用FormData()
        let fd = new FormData();


        // 3.拼接对象---键值对(键名必须是接口里面的参数,键值是刚才拿到的图像源)
        fd.append('file', f);        //{file:图像源}，下面ajax直接传fd就行，本来已经是对象了
        console.log(fd.get('file'));    //通过指定键名获取相关的值--验证是否拼接

        // 4.发ajax进行上传功能
        https.upLoadPic('/api/shared/uploadPortrait1', fd, function (res) {
            if (res.errno == 0) {   //上传成功
                dom.getEle('#avatar').src = `
                http://47.96.154.185:3701${res.data.url}
                `
                imgUrl=res.data.url
            }
        })
    })


    // 性别
    let gender;
    dom.getEle('#showSexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            // // 在选择的时候触发事件，一般不用
            // onChange: function (result) {
            //     // console.log(result);
            //     dom.getEle('#sex').innerHTML=this.label
            // },
            // 在确定时触发的事件
            onConfirm: function (result) {
                console.log(result);
                let se = result.map(function (v) {
                    return v.label;
                })
                dom.getEle('#sex').innerHTML = se;
                gender=result[0].value
            },
            title: '性别'
        });
    });



    // 生日
    dom.getEle('#showDatePicker').addEventListener('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            // onChange: function (result) {
            //     // console.dir(this);===>defaultValue
            //     dom.getEle('#birthday').innerHTML=this.defaultValue.join('-')
            // },
            onConfirm: function (result) {
                // console.log(result);

                // ES5
                // let bir=result.map(function(v){
                //     return v.value<10?'0'+v.value:v.value;
                // })

                // ES6
                let bir = result.map(v => v.value < 10 ? '0' + v.value : v.value)
                dom.getEle('#birthday').innerHTML = bir.join('-')
            },
            title: '生日'
        });
    });


    // 省份
    /*
       异步操作：需要等待同步操作执行完成后，才能进行异步
       同步操作：代码从上到下，从左到右依次执行，只要上一步没有完成，就不会进行下一步
    */
    // 定义省份id
    let provinceId;
    dom.getEle('#showPicker').addEventListener('click', function () {

        // 获取所有省份信息----ajax
        https.get('/api/shared/province', {}, function (res) {
            // 判定
            if (res.errno == 0) {
                // console.log(res.data);
                /*
                   注意：格式必须为
                     label: '四川',
                     value: 0
                */
                let preData = res.data.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                // console.log(preData);

                // 调用选择器
                weui.picker(preData, {
                    onConfirm: function (result) {
                        // console.log(result);===》可以看到lable和value
                        // let prov = result.map(function (v) {
                        //     return v.label;
                        // }) 
                        // dom.getEle('#province').innerHTML = prov

                        // 简便写法,利用下标0
                        dom.getEle('#province').innerHTML = result[0].label;


                        // 先获取省份id
                        provinceId = result[0].value
                        // console.log(provinceId);




                    },
                    title: '省份'
                });

            }
        })

    });


    // 进行城市选择
    let cityId;
    dom.getEle('#showCityPicker').addEventListener('click', function () {
        if (provinceId) {
            // 获取数据
            https.get('/api/shared/city', { provinceId }, function (res) {
                if (res.errno == 0) {
                    console.log(res.data);
                    // 数据格式处理
                    let cArr = res.data.map(v => {
                        return {
                            label: v.name,
                            value: v.id
                        }
                    })
                    // console.log(cArr);

                    // 选择器
                    weui.picker(cArr, {
                        onConfirm: function (result) {
                            dom.getEle('#city').innerHTML = result[0].label;
                            cityId=result[0].value
                        },
                        title: '城市'

                    })

                }
            })
        } else {
            console.log('请选择省份');
        }
    })




    // 个人简介功能
    dom.getEle('#info').addEventListener('input', function () {
        console.log(this.value);
        //  获取当前文本内容的长度
        let len = this.value.length;
        // 把长度放到指定位置
        dom.getEle('#currentNum').innerHTML = len;
        // 判定
        if (len > 200) {
            dom.getEle('#info').value = (this.value).slice(0, 199);
            dom.getEle('#currentNum').innerHTML = 200
        }
    });


    // 保存信息
    dom.getEle('#saveBtn').addEventListener('click', function () {
        // 了解--主要为了所有数据都获取到，并且不报错
        let data={ 
            imgUrl:imgUrl?imgUrl:local.get('userData').imgUrl,
            nickName:(nickName.value?nickName.value:local.get('userData').nickName)?nickName.value?nickName.value:local.get('userData').nickName:'匿名',
            gender,  
            birthday:birthday.innerHTML,
            provinceId,
            cityId,
            sign:info.value

        }
        
        https.post('/api/user/changeInfo',data,function(res){
            // console.log(res);

            if(res.errno==0){
                // console.log(res);
                // 提示信息
                weui.toast('修改信息',3000);
                // 存储到本地
                localStorage.setItem('tk',res.data.token);
                // 跳转到我的页面
                window.location.href='information.html'
            }
        })
        // console.log(data);
    })


    // 数据回填功能---吧本地数据渲染到网页中
    function render(){
        // 1.获取本地数据
        let localData=local.get('userdata');
        // console.log(localData);

        // 2.回填数据到网页中
        avatar.src='http://47.96.154.185:3701'+localData.imgUrl;
        nickName.value=localData.nickName;
        birthday.innerHTML=localData.birthday;
        sex.innerHTML=localData.gender=='0'?'女':localData.gender=='1'?'男':'不详';
        info.value=localData.sign;
        // province.innerHTML=returnCitySN.cname;
        // provinceId=returnCitySN.cid;
    }

    render()


})

